<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <ul>
        
    </ul>

    <h1>11</h1>
    <h2>22</h2>

    <script>

        // 重绘    color 
        // 回流    display:none

        // 回流和重绘是无法避免的
        // 回流的代价远大于重绘


        // display:none   visibility:hidden


        // 每创建一个节点就知道使用一次


        // var oUl = document.querySelector('ul') ;

        // for(var i = 0 ; i < 10 ; i++) {
        //     var oLi = document.createElement('li') ;
        //     oLi.innerHTML = i ;
        //     // 每创建一个li 就插入一个 --- 不断的引发页面的回流
        //     oUl.appendChild(oLi) ;
        // }



        // 把所有的li生成完以后  存入  文档碎片  中

        //   文档碎片是一种节点 --- 不是元素
        var fragment = document.createDocumentFragment() ;

        for(var i = 0 ; i < 10 ; i++) {
            var oLi = document.createElement('li') ;
            oLi.innerHTML = i ;
            // 把li存入文档碎片
            fragment.appendChild(oLi) ;
        }


        var oUl = document.querySelector('ul') ;
        // 只插入一次
        oUl.appendChild(fragment) ;


    </script>
    
</body>
</html>